.popular_courses{
    padding-top: 60px;
    padding-bottom: 200px;
    &.plus_padding{
        padding-top: 200px;
        @media #{$mobile_device} {
            padding-bottom: 100px;
        }
        @media #{$tablet_device} {
            padding-bottom: 100px;
        }
        @media #{$mid_device} {
            padding-bottom: 120px;
        }
    }
    @media #{$mobile_device} {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    @media #{$tablet_device} {
        padding-top: 60px;
        padding-bottom: 100px;
    }
    .single_courses{
        margin-bottom: 50px;
        @include box-shadow(0 5px 10px rgba(0,0,0,0.05));
        .thumb{
            overflow: hidden;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            img{
                width: 100%;
                @include transform(scale(1));
                @include transition(.3s);
            }
        }
        .courses_info{
            padding: 30px 30px 15px 30px;
            span{
                font-size: 14px;
                color: #4D4D4D;
                font-family: $font1;
            }
            h3{
                font-size: 18px;
                color: #1F1F1F;
                font-family: $font1;
                font-weight: 500;
                line-height: 28px;
                margin-top: 11px;
                margin-bottom: 30px;
                br{
                    @media #{$mobile_device} {
                        display: none;
                    }
                    @media #{$tablet_device} {
                        display: none;
                    }
                    @media #{$mid_device} {
                        display: none;
                    }
                    @media #{large_device} {
                        display: none;
                    }
                }
                a{
                    &:hover{
                        color: #FDAE5C;
                    }
                }
            }
            .star_prise{
                border-top: 1px solid #E8E8E8;
                padding-top: 16px;
                .star{
                    i{
                        font-size: 16px;
                        color: #FD8E5E;
    
                    }
                    span{
                        font-weight: 400;
                        font-size: 14px;
                        color: #919191;
                    }
                }
                .prise{
                    span{
                        font-size: 16px;
                        &.offer{
                            color: #C7C7C7;
                            text-decoration: line-through;
                            margin-right: 14px;
                        }
                        &.active_prise{
                            color: #1F1F1F;
                        }
                    }
                }
            }
        }
        &:hover{
            .thumb{
                overflow: hidden;
                img{
                    width: 100%;
                    @include transform(scale(1.1));
                }
            }
        }
    }
    .more_courses {
        margin-top: 30px;
    }
    .course_nav{
        .nav{
            @include justify-content(space-between);
            margin-bottom: 100px;
            border-bottom: 1px solid #E8E8E8;
            @media #{$mobile_device} {
                margin-bottom: 30px;
            }
            li{
                a{
                font-family: $font1;
                font-weight: 500;
                padding: 30px 0;
                font-size: 16px;
                color: #919191;
                @media #{$mobile_device} {
                    padding: 10px 0;
                    font-size: 15px;
                }
                @media #{$tablet_device}{
                    font-size: 13px;
                }
                    &.active{
                        color: #1F1F1F;
                        position: relative;
                        z-index: 9;

                        &::before{
                            content: "";
                            background: #04D2C8;
                            width: 100%;
                            height: 3px;
                            bottom: 0;
                            left: 0;
                            position: absolute;
                        }
                    }
                }
            }
        }
    }
}